/**
 * 角色管理页面的JavaScript
 */
$(function() {
    // 初始化数据表格
    var table = $('#roleTable').DataTable({
        language: {
            "sProcessing": "处理中...",
            "sLengthMenu": "显示 _MENU_ 项结果",
            "sZeroRecords": "没有匹配结果",
            "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
            "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
            "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
            "sInfoPostFix": "",
            "sSearch": "搜索:",
            "sUrl": "",
            "sEmptyTable": "表中数据为空",
            "sLoadingRecords": "载入中...",
            "sInfoThousands": ",",
            "oPaginate": {
                "sFirst": "首页",
                "sPrevious": "上页",
                "sNext": "下页",
                "sLast": "末页"
            }
        },
        processing: true,
        serverSide: true,
        ajax: {
            url: '/system/role/list',
            type: 'POST',
            contentType: 'application/json',
            data: function(d) {
                // 添加额外的请求参数
                return JSON.stringify({
                    pageSize: d.length,
                    pageNum: (d.start / d.length) + 1,
                    roleName: $('#roleName').val(),
                    roleKey: $('#roleKey').val(),
                    status: $('#status').val()
                });
            },
            dataSrc: function(json) {
                // 处理返回的数据
                if (json.code === 200 && json.data && json.data.rows) {
                    // 更新表格显示的总记录数
                    json.recordsTotal = json.data.total || json.data.rows.length;
                    json.recordsFiltered = json.data.total || json.data.rows.length;
                    
                    return json.data.rows.map(function(role) {
                        return [
                            role.roleId,
                            role.roleName,
                            role.roleKey,
                            role.roleSort,
                            role.status === '0' ? '<span class="status-active">正常</span>' : '<span class="status-inactive">停用</span>',
                            role.createTime || '',
                            '<button class="btn btn-sm btn-info view-btn" data-id="' + role.roleId + '">查看</button> ' +
                            '<button class="btn btn-sm btn-primary edit-btn" data-id="' + role.roleId + '">编辑</button> ' +
                            '<button class="btn btn-sm btn-danger delete-btn" data-id="' + role.roleId + '">删除</button>'
                        ];
                    });
                }
                return [];
            }
        },
        columns: [
            { title: "角色ID" },
            { title: "角色名称" },
            { title: "权限字符" },
            { title: "显示顺序" },
            { title: "状态" },
            { title: "创建时间" },
            { title: "操作" }
        ]
    });
    
    // 查看角色详情
    $('#roleTable').on('click', '.view-btn', function() {
        var data = table.row($(this).parents('tr')).data();
        var roleId = $(this).data('id');
        
        // 获取角色详情
        $.ajax({
            url: '/system/role/getInfo/' + roleId,
            type: 'GET',
            success: function(res) {
                if (res.code === 200) {
                    var role = res.data;
                    // 构建角色详情HTML
                    var detailsHtml = `
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <strong>角色ID：</strong> ${role.roleId}
                            </div>
                            <div class="col-md-6">
                                <strong>角色名称：</strong> ${role.roleName}
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <strong>权限字符：</strong> ${role.roleKey}
                            </div>
                            <div class="col-md-6">
                                <strong>显示顺序：</strong> ${role.roleSort}
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <strong>状态：</strong> ${role.status === '0' ? '<span class="status-active">正常</span>' : '<span class="status-inactive">停用</span>'}
                            </div>
                            <div class="col-md-6">
                                <strong>创建时间：</strong> ${role.createTime || ''}
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-12">
                                <strong>备注：</strong> ${role.remark || ''}
                            </div>
                        </div>
                    `;
                    
                    $('#roleDetails').html(detailsHtml);
                    $('#roleModal').modal('show');
                } else {
                    alert('获取角色详情失败: ' + res.msg);
                }
            },
            error: function() {
                alert('服务器错误，请稍后再试');
            }
        });
    });
    
    // 编辑角色
    $('#roleTable').on('click', '.edit-btn', function() {
        var roleId = $(this).data('id');
        
        // 获取角色详情
        $.ajax({
            url: '/system/role/getInfo/' + roleId,
            type: 'GET',
            success: function(res) {
                if (res.code === 200) {
                    var role = res.data;
                    
                    // 填充表单
                    $('#roleId').val(role.roleId);
                    $('#modalRoleName').val(role.roleName);
                    $('#modalRoleKey').val(role.roleKey);
                    $('#modalRoleSort').val(role.roleSort);
                    $('#modalStatus').val(role.status);
                    $('#modalRemark').val(role.remark);
                    
                    // 获取角色菜单权限
                    $.ajax({
                        url: '/system/role/roleMenuList/' + roleId,
                        type: 'GET',
                        success: function(menuRes) {
                            if (menuRes.code === 200) {
                                // 加载菜单树并选中对应的菜单
                                loadMenuTree(menuRes.data);
                            }
                        }
                    });
                    
                    $('#addEditRoleModalLabel').text('编辑角色');
                    $('#addEditRoleModal').modal('show');
                } else {
                    alert('获取角色详情失败: ' + res.msg);
                }
            },
            error: function() {
                alert('服务器错误，请稍后再试');
            }
        });
    });
    
    // 删除角色
    $('#roleTable').on('click', '.delete-btn', function() {
        var data = table.row($(this).parents('tr')).data();
        var roleId = $(this).data('id');
        
        if (confirm('确定要删除角色 "' + data[1] + '" 吗？')) {
            $.ajax({
                url: '/system/role/delete',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({roleId: roleId}),
                success: function(res) {
                    if (res.code === 200) {
                        alert('删除成功');
                        table.ajax.reload();
                    } else {
                        alert('删除失败: ' + res.msg);
                    }
                },
                error: function() {
                    alert('服务器错误，请稍后再试');
                }
            });
        }
    });
    
    // 新增角色按钮点击事件
    $('#addBtn').click(function() {
        // 重置表单
        $('#roleForm')[0].reset();
        $('#roleId').val('');
        
        // 加载菜单树
        loadMenuTree([]);
        
        $('#addEditRoleModalLabel').text('新增角色');
        $('#addEditRoleModal').modal('show');
    });
    
    // 保存角色按钮点击事件
    $('#saveRoleBtn').click(function() {
        // 表单验证
        if (!$('#roleForm')[0].checkValidity()) {
            $('#roleForm')[0].reportValidity();
            return;
        }
        
        // 获取选中的菜单ID
        var menuIds = [];
        $('#menuTree input[type="checkbox"]:checked').each(function() {
            menuIds.push($(this).val());
        });
        
        // 收集表单数据
        var formData = {
            roleId: $('#roleId').val() || null,
            roleName: $('#modalRoleName').val(),
            roleKey: $('#modalRoleKey').val(),
            roleSort: $('#modalRoleSort').val(),
            status: $('#modalStatus').val(),
            remark: $('#modalRemark').val(),
            menuIds: menuIds
        };
        
        // 发送请求到后端保存角色
        $.ajax({
            url: '/system/role/' + ($('#roleId').val() ? 'update' : 'add'),
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function(res) {
                if (res.code === 200) {
                    alert('操作成功');
                    $('#addEditRoleModal').modal('hide');
                    table.ajax.reload();
                } else {
                    alert('操作失败: ' + res.msg);
                }
            },
            error: function() {
                alert('服务器错误，请稍后再试');
            }
        });
    });
    
    // 查询按钮点击事件
    $('#searchBtn').click(function() {
        table.ajax.reload();
    });
    
    // 重置按钮点击事件
    $('#resetBtn').click(function() {
        $('#roleName').val('');
        $('#roleKey').val('');
        $('#status').val('');
        table.ajax.reload();
    });
    
    // 导出按钮点击事件
    $('#exportBtn').click(function() {
        var queryParams = {
            roleName: $('#roleName').val(),
            roleKey: $('#roleKey').val(),
            status: $('#status').val()
        };
        
        // 构建查询参数
        var params = $.param(queryParams);
        window.location.href = '/system/role/export?' + params;
    });
});

// 加载菜单树
function loadMenuTree(checkedMenuIds) {
    $.ajax({
        url: '/system/menu/treeselect',
        type: 'GET',
        success: function(res) {
            if (res.code === 200) {
                var menuTreeHtml = buildMenuTreeHtml(res.data, checkedMenuIds);
                $('#menuTree').html(menuTreeHtml);
                
                // 初始化菜单树的交互
                initMenuTree();
            }
        }
    });
}

// 构建菜单树HTML
function buildMenuTreeHtml(menus, checkedMenuIds) {
    if (!menus || menus.length === 0) {
        return '<div class="text-center">暂无菜单数据</div>';
    }
    
    var html = '<ul class="list-unstyled">';
    
    menus.forEach(function(menu) {
        var isChecked = checkedMenuIds.includes(menu.menuId);
        
        html += '<li>';
        html += '<div class="custom-control custom-checkbox">';
        html += '<input type="checkbox" class="custom-control-input" id="menu_' + menu.menuId + '" value="' + menu.menuId + '"' + (isChecked ? ' checked' : '') + '>';
        html += '<label class="custom-control-label" for="menu_' + menu.menuId + '">' + menu.menuName + '</label>';
        html += '</div>';
        
        // 递归处理子菜单
        if (menu.children && menu.children.length > 0) {
            html += '<div class="pl-4 mt-2">';
            html += buildMenuTreeHtml(menu.children, checkedMenuIds);
            html += '</div>';
        }
        
        html += '</li>';
    });
    
    html += '</ul>';
    return html;
}

// 初始化菜单树的交互
function initMenuTree() {
    // 父节点选中时，子节点全部选中
    $('#menuTree input[type="checkbox"]').change(function() {
        var isChecked = $(this).prop('checked');
        $(this).closest('li').find('input[type="checkbox"]').prop('checked', isChecked);
    });
} 